<template>
  <div class="container clearfix"
       v-if="hos_detail!=''">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scrolltolower="infinit_scroll"
                 :lower-threshold="150">
      <div class="banner">
        <!-- 底部栏位 -->
        <div class="hos-img">
          <!-- <img :src="img_url+'/3.03/empty.png'"
               v-if="!hos_detail.images"
          class="img"> -->
          <swiper :indicator-dots="true"
                  :autoplay="true"
                  :circular="true"
                  :interval="2000"
                  :duration="500"
                  indicator-color="rgba(255, 255,255,.5)"
                  indicator-active-color="rgba(255, 255,255,1)"
                  class="swiper"
                  v-if="1">
            <block v-for="(item, index) in hos_detail.images"
                   :key="index">
              <swiper-item>
                <image :src="img_url+item"
                       v-if="img_url&&item"
                       class="slide-image"
                       :lazy-load="true" />
              </swiper-item>
            </block>
          </swiper>
          <div class="tipshow"
               @click="tophoto">
            <img :src="img_url+'h5_images/mp_images/3.03/icon1.png'"
                 v-if="img_url"
                 alt=""
                 class="img">
            {{hos_detail.images.length}}
          </div>
        </div>
      </div>
      <div class="hos-info">
        <div class="left">
          <div class="hos-logo">
            <img :src="img_url+hos_detail.logo"
                 v-if="img_url&&hos_detail.logo"
                 class="img" />
            <div class="logo-icon"
                 v-if="hos_detail.exam_info_label==1||hos_detail.examStatus==1">
              245项严选
            </div>
          </div>
        </div>
        <div class="info">
          <div class="hos-name">
            <div class="hos-msg">{{hos_detail.name}}</div>
            <!-- 分数 -->
            <div class="grade"
                 v-if="hos_detail.exam_info_label==1||hos_detail.examStatus==1">
              <img :src="base_url+'/mp_3.2.0/245%E4%B8%A5%E9%80%89/%E8%AF%84%E5%88%86/iOS/%E5%BD%A2%E7%8A%B6%202%403x.png'"
                   v-if="base_url"
                   alt=""
                   class="grade-icon">
              <div class="grade-num">{{hos_detail.exam_info_score||hos_detail.examScore}}分</div>
            </div>
            <!-- 右上角等级 -->
            <div class="leval"
                 v-if="hos_detail.tag">
              <div class="msg">{{hos_detail.tag}}</div>
            </div>

          </div>
          <div class="address">
            <div class="icon">
              <img :src="base_url+'/mp_2.4/search/dingwei.png'"
                   v-if="base_url"
                   alt
                   class="img" />
            </div>
            <div class="msg">{{hos_detail.address}}</div>
          </div>
          <!-- <div class="tip"
               v-if="hos_detail.is_no_reason==1">
            90天不满意退款
          </div>-->
          <div class="tags clearfix">
            <div class="tag-item doctor">预约:{{hos_detail.reservationNumber}}</div>
            <div class="tag-item project">案例:{{hos_detail.caseNumber}}</div>
          </div>

        </div>
        <!-- 严选结果 -->
        <div class="hos-result"
             v-if="hos_detail.exam_info_label==1||hos_detail.examStatus==1"
             @tap="to_detail()">
          <img :src="base_url+'/mp_3.2.0/编组 10@2x.png'"
               v-if="base_url"
               alt=""
               class="icon">
        </div>
        <img :src="img_url+'h5_images/mp_images/3.03/unlike.png'"
             alt
             class="collect"
             @click="collectEvent"
             v-if="hos_detail.collect==false&&img_url" />
        <img :src="img_url+'h5_images/mp_images/3.03/like.png'"
             alt
             class="collect"
             @click="collectEvent"
             v-if="hos_detail.collect&&img_url" />
      </div>
      <!-- 营业执照 -->
      <div class="license"
           v-if="!isshow ">
        <ul class="list">
          <li class="li">
            <img :src="img_url+'h5_images/mp_images/3.03/zhizhao@2x.png'"
                 v-if="img_url"
                 alt
                 class="icon icon1" />
            执照许可
          </li>
          <li class="li">
            <img :src="img_url+'h5_images/mp_images/3.03/hos_icon@2x.png'"
                 v-if="img_url"
                 alt
                 class="icon icon2" />
            90天不满意退款
          </li>
          <li class="li">
            <img :src="img_url+'h5_images/mp_images/3.03/img@2x.png'"
                 v-if="img_url"
                 alt
                 class="icon icon3" />
            医院相册
          </li>
        </ul>
        <div class="btn"
             @click="checkLicense">
          <img :src="img_url+'h5_images/mp_images/3.03/zhankai@2x.png'"
               v-if="img_url"
               alt
               class="icon" />
        </div>
      </div>
      <div class="photo"
           v-if="isshow">
        <div class="licenseshow"
             v-for="(item, index) in imgobj"
             :key="index">
          <ul class="ul"
              v-if="item.img[0]">
            <div class="title">
              <img :src="item.icon"
                   alt
                   class="icon" />
              {{item.title}}
            </div>
            <li class="li"
                v-for="(val,i) in item.img"
                :key="i"
                @click="checkimg(item.img,val)">
              <img :src="img_url+val"
                   v-if="img_url"
                   alt
                   class="img" />
            </li>
          </ul>
        </div>
        <div class="pick"
             @click="pickUp">
          <img :src="img_url+'h5_images/mp_images/3.03/shouqi.png'"
               v-if="img_url"
               alt
               class="packup" />
        </div>
      </div>
      <!-- 医疗范围 -->
      <div class="section scope"
           v-if="hos_detail.rangeTreatment&&hos_detail.rangeTreatment!=''">
        <div class="title clearfix">
          <span class="icon"></span>
          <div class="msg">医疗范围</div>
        </div>
        <div class="scope-detail">
          <div class="richtext">{{hos_detail.rangeTreatment}}</div>
        </div>
      </div> <!-- 医院介绍 -->
      <div class="section introduction">
        <div class="title clearfix">
          <span class="icon"></span>
          <div class="msg">医院介绍</div>
          <div class="show-all"
               @tap="show_detail()">
            {{show_all_detail?'收起':'展开'}}
            <span class="arrows"
                  :class="show_all_detail?'down':'up'">
              <img :src="base_url+'/xia-hui@2x.png'"
                   v-if="base_url"
                   alt
                   class="img" />
            </span>
          </div>
        </div>
        <div class="intro-detail"
             :class="show_all_detail?'show':'normal'">
          <!-- <rich-text :nodes="hos_detail.content" space="nbsp" class="richtext"></rich-text> -->
          <div class="richtext"
               v-html="hos_detail.content1"></div>
        </div>
      </div>
      <!-- 医生介绍 -->
      <div class="section doctors"
           v-if="doctors.length>0">
        <div class="title clearfix">
          <span class="icon"></span>
          <div class="msg">医生介绍</div>
        </div>
        <scroll-view scroll-x
                     scroll-with-animation
                     :style="{'height':'100%'}">
          <ul class="doc-list clearfix"
              :style="{'width':doctors.length*143+'px'}">
            <div class="list-item clearfix"
                 v-for="(item, i) in doctors"
                 :key="i"
                 @tap="doc_detail(item)">
              <div class="item-top">
                <div class="logo">
                  <img :src="img_url+item.image"
                       v-if="img_url"
                       mode="widthFix"
                       class="img" />
                </div>
                <div class="tip"
                     v-if="item.isV==1">
                  <img :src="base_url+'/mp_2.4/yishengbiaoshi-xiao/VIP@2x.png'"
                       v-if="base_url"
                       class="img" />
                </div>
              </div>
              <div class="doc-name">{{item.name}}</div>
              <div class="duty">{{item.post}}</div>
              <div class="rate">
                <div class="rates">
                  <div class="stars">
                    <img :src="base_url+(item.star>=1?'/mp_2.4/search/Star_gray.png':'mp_2.4/search/Star_light.png')"
                         v-if="base_url"
                         alt
                         class="img" />
                    <img :src="base_url+(item.star>=2?'/mp_2.4/search/Star_gray.png':'mp_2.4/search/Star_light.png')"
                         v-if="base_url"
                         alt
                         class="img" />
                    <img :src="base_url+(item.star>=3?'/mp_2.4/search/Star_gray.png':'mp_2.4/search/Star_light.png')"
                         v-if="base_url"
                         alt
                         class="img" />
                    <img :src="base_url+(item.star>=4?'/mp_2.4/search/Star_gray.png':'mp_2.4/search/Star_light.png')"
                         v-if="base_url"
                         alt
                         class="img" />
                    <img :src="base_url+(item.star>=5?'/mp_2.4/search/Star_gray.png':'mp_2.4/search/Star_light.png')"
                         v-if="base_url"
                         alt
                         class="img" />
                  </div>
                  <div class="score">{{item.star}}分</div>
                </div>
              </div>
            </div>
          </ul>
        </scroll-view>
      </div>
      <!-- 项目 -->
      <div class="section project">
        <div class="title clearfix">
          <span class="icon"></span>
          <div class="msg">项目介绍</div>
        </div>
        <div class="controller">
          <div class="controller-item"
               :class="{'active':sale_sort}"
               @tap="toggle_salesort">销量</div>
          <div class="controller-item"
               :class="{'active':popularity_sort}"
               @tap="toggle_popularitysort">人气</div>
          <div class="controller-item"
               @tap="toggle_pricesort">
            价格
            <span class="arraws"
                  v-if="base_url">
              <div class="top">
                <img :src="base_url+'/shang-hui@2x.png'"
                     class="img"
                     v-if="price_sort==0||price_sort==2"
                     alt />
                <img :src="base_url+'/shang-hong@2x.png'"
                     class="img"
                     v-if="price_sort==1"
                     alt />
              </div>
              <div class="bottom">
                <img :src="base_url+'/shang-hui@2x.png'"
                     v-if="price_sort==0||price_sort==1"
                     class="img"
                     alt />
                <img :src="base_url+'/shang-hong@2x.png'"
                     v-if="price_sort==2"
                     class="img"
                     alt />
              </div>
            </span>
          </div>
        </div>
        <div class="project-list clearfix">
          <project-list v-if="project_arr"
                        :project_list="project_arr"></project-list>
          <bottom-part v-if="isbottom"></bottom-part>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import projectList from "@/components/search_list/projects_list_java";
import bottomPart from "@/components/search/result_item/bottom";
export default {
  data () {
    return {
      base_url: common.image_resource,
      img_url: common.image_response,
      show_all_detail: false,
      hospital_id: 0,
      hos_detail: "",
      project_arr: [],
      page: 1,
      pageSize: 10,
      sale_sort: false,
      popularity_sort: false,
      price_sort: 0,
      latitude: 0,
      longitude: 0,
      isbottom: false,
      isshow: false,
      doctors: [],
      imgobj: {}
    };
  },
  methods: {
    to_detail () {
      wx.navigateTo({ url: '/pages/package_projects/hospital_results/main?hos_id=' + this.hospital_id });
    },
    show_detail () {
      this.show_all_detail = !this.show_all_detail;
    },
    get_detail () {
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenHospitalProvider/1.0.0/get.html",
        {
          id: this.hospital_id - 0
        },
        result => {
          let res = result.data;
          if (res.code == 0) {
            this.hos_detail = res.data;
            this.hos_detail.content1 = res.data.content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
            wx.setStorageSync("hospital_photo", this.hos_detail.images);
            if (res.data.institutionLicenseImages) {
              var obj = {};
              obj.img = res.data.institutionLicenseImages;
              obj.title = "执业许可";
              obj.icon =
                this.img_url + "h5_images/mp_images/3.03/zhizhao@2x.png";
              this.imgobj.institutionLicenseImages = obj;
              // console.log(this.imgobj);
            }
            if (res.data.supportRefunds) {
              var obj = {};
              obj.img = res.data.supportRefunds;
              // obj.img = res.data.institutionLicenseImages;
              obj.title = "90天不满意退款";
              obj.icon =
                this.img_url + "h5_images/mp_images/3.03/hos_icon@2x.png";
              this.imgobj.supportRefunds = obj;
              // console.log(this.imgobj);
            }
            if (res.data.environments) {
              var obj = {};
              obj.img = res.data.environments;
              // obj.img = res.data.institutionLicenseImages;
              obj.title = "医院相册";
              obj.icon = this.img_url + "h5_images/mp_images/3.03/img@2x.png";
              this.imgobj.environments = obj;
              console.log(this.imgobj);
            }

            // this.imgobj.supportRefunds = res.data.supportRefunds;
            // this.imgobj.environments = res.data.environments;
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        },
        "isJava"
      );
      common.fly_post(
        "/api/com.mmk.reservation.api.OpenDoctorProvider/1.0.0/findDoctorsByHospitalId.html",
        {
          id: this.hospital_id - 0
        },
        result => {
          let res = result.data;
          if (res.code == 0) {
            this.doctors = res.data;
            console.log(res.data);
          } else {
            wx.showToast({
              title: res.msg, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
        , 'isjava');
    },
    get_project () {
      if (this.isbottom) {
        return false;
      }
      common.mmk_toast({ type: 0 });
      common.fly_post(
        "api/com.mmk.reservation.api.OpenProjectProvider/1.0.0/projectList.html",
        {
          pageNum: this.page,
          pageSize: this.pageSize,
          hospitalId: this.hospital_id,
          lng: (this.longitude || 0) + '',
          lat: (this.latitude || 0) + '',
          // 1 从低到高  2 从高到低
          salesSort: this.sale_sort ? 2 : 0,
          collectSort: this.popularity_sort ? 2 : 0,
          priceSort: this.price_sort
        },
        result => {
          let res = result.data;
          wx.hideLoading();
          if (res.code == "0") {
            if (this.page == 1 && res.data.projectData.length > 0) {
              this.project_arr = res.data.projectData || [];
            } else if (this.page > 1 && res.data.projectData.length > 0) {
              this.project_arr.push(...res.data.projectData);
            } else if (this.page > 1 && res.data.projectData.length == 0) {
              this.isbottom = true;
            }
          } else {
            wx.showToast({
              title: res.msg, //提示的内容,
              icon: '', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
        , 'isjava');
    },
    get_location () {
      // 获取经纬度
      let that = this;
      wx.getLocation({
        type: "gcj02", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          this.latitude = res.latitude;
          this.longitude = res.longitude;
          this.get_project();
        },
        fail: () => {
          wx.showToast({
            title: "获取地理位置失败", //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    infinit_scroll () {
      this.page++;
      this.get_project();
    },
    doc_detail (item) {
      wx.navigateTo({ url: "/pages/package_projects/doctordetail/main?id=" + item.id });
    },
    toggle_salesort () {
      this.isbottom = false;
      this.page = 1;
      this.popularity_sort = false;
      this.sale_sort = !this.sale_sort;
      this.get_project();
    },
    toggle_popularitysort () {
      this.isbottom = false;
      this.page = 1;
      this.sale_sort = false;
      this.popularity_sort = !this.popularity_sort;
      this.get_project();
    },
    toggle_pricesort () {
      this.isbottom = false;
      this.page = 1;
      this.price_sort++;
      this.price_sort = this.price_sort == 3 ? 1 : this.price_sort;
      this.get_project();
    },
    // 点击查看医院资质
    checkLicense () {
      if (!this.imgobj) {
        return false;
      }
      this.isshow = true;
    },
    pickUp () {
      this.isshow = false;
    },
    collectEvent () {
      //收藏
      var api, obj;
      if (this.hos_detail.collect) {
        //取消
        var arr = [];
        arr.push(this.hospital_id.toString());
        api =
          "/api/com.mmk.reservation.api.OpenMmkUserCollectProvider/1.0.0/cancelMmkUserCollects.html";
        obj = {
          type: 4,
          collectIds: arr
        };
      } else {
        api =
          "/api/com.mmk.reservation.api.OpenMmkUserCollectProvider/1.0.0/addMmkUserCollect.html";
        obj = {
          type: 4,
          collectId: this.hospital_id.toString()
        };
      }
      common.fly_post(
        api,
        obj,
        result => {
          let res = result.data;
          console.log(res);
          if (res.code == 0) {
            this.get_detail();
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: "none", //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        },
        "isjava"
      );
    },
    tophoto () {
      wx.navigateTo({
        url: "/pages/package_projects/hospital_photo/main"
      })
    },
    checkimg (item, val) {
      common.tapBigImg(item, val);
    },
  },
  components: {
    projectList,
    bottomPart
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "严选机构"
    });
    Object.assign(this.$data, this.$options.data());
    // options.hos_id = 29;
    if (options.hos_id) {
      this.hospital_id = options.hos_id;
      this.get_detail();
      this.get_location();
    }
  },

  onShow () { }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(243, 244, 246, 1);
  box-sizing: border-box;
  .banner {
    width: 100%;
    position: relative;
    .hos-img {
      position: relative;
      .swiper {
        width: 100%;
        height: 211px;
        .slide-image {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .tipshow {
        width: 42px;
        height: 19px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        position: absolute;
        bottom: 9px;
        right: 9px;
        text-align: center;
        // opacity: .3;
        color: #fff;
        box-sizing: border-box;
        padding-top: 3px;
        .img {
          width: 14px;
          height: 12px;
          // vertical-align: baseline
        }
      }
    }

    .bottom-bar {
      width: 100%;
      height: 35px;
      background: rgba(0, 0, 0, 0.44);
      position: absolute;
      bottom: 0;
      z-index: 10;
      padding-left: 15px;
      .bar-item {
        float: left;
        line-height: 35px;
        margin-right: 10px;
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        .msg {
          color: rgba(255, 255, 255, 1);
        }
        .num {
          color: rgba(255, 56, 62, 1);
        }
      }
    }
  }
  .hos-info {
    display: flex;
    padding: 10px 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    position: relative;
    .left {
      width: 50px;
      height: 50px;
      position: relative;
      .hos-logo {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #ccc;
        .img {
          width: 100%;
          height: 100%;
          display: block;
        }
        .logo-icon {
          width: 50px;
          height: 17px;
          background: linear-gradient(
            226deg,
            rgba(254, 120, 161, 1) 0%,
            rgba(254, 123, 136, 1) 100%
          );
          border-radius: 0px 10px 0px 8px;
          font-size: 9px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          line-height: 17px;
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 50%);
        }
      }
      .tip {
        width: 11px;
        height: 11px;
        position: absolute;
        bottom: 1px;
        right: 3px;
        .img {
          width: 100%;
        }
      }
    }
    .info {
      flex: 1;
      padding-left: 10px;
      position: relative;
      .hos-name {
        display: flex;
        .hos-msg {
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          vertical-align: middle;
        }
        .grade {
          margin-left: 20px;
          vertical-align: middle;
          margin-top: 1px;
          .grade-icon {
            width: 9px;
            height: 11px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 2px;
          }
          .grade-num {
            font-size: 9px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(255, 132, 48, 1);
            line-height: 13px;
            display: inline-block;
            vertical-align: middle;
          }
        }

        .leval {
          margin-left: 29px;
          margin-top: 1px;
          vertical-align: middle;
          .msg {
            padding-left: 12px;
            padding-right: 6px;
            height: 15px;
            line-height: 15px;
            background: rgba(255, 152, 108, 1);
            box-shadow: 0px 1px 1px 0px rgba(255, 91, 118, 0.42);
            border-radius: 7px;
            font-size: 10px;
            font-family: "PingFangSC-Medium";
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            position: relative;
            &::before {
              content: "";
              width: 18px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              border-radius: 50%;
              display: block;
              background-image: url("https://h5.ameimeika.com/mp_images/mp_2.4/search/vvvvv@2x.png");
              background-repeat: no-repeat;
              background-size: cover;
              box-shadow: 0px 1px 2px 0px rgba(255, 98, 117, 0.61);
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate(-50%, -50%);
              font-size: 12px;
              font-weight: 500;
              color: rgba(255, 255, 255, 1);
            }
          }
        }
      }
      .address {
        margin-top: 5px;
        display: flex;
        .icon {
          width: 12px;
          padding-top: 2px;
          .img {
            width: 11px;
            height: 12px;
            display: block;
          }
        }
        .msg {
          width: 70%;
          height: 20px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          // display: inline-block;
        }
      }
      .tip {
        width: 84px;
        height: 16px;
        background: rgba(255, 211, 156, 1);
        box-shadow: 0px 1px 1px 0px rgba(255, 91, 118, 0.42);
        border-radius: 11px;
        font-size: 10px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 16px;
        text-align: center;
        margin-top: 10px;
      }
      .tags {
        margin-top: 5px;
        .tag-item {
          width: auto;
          height: 20px;
          // border-radius: 10px;
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: #999;
          line-height: 20px;
          text-align: center;
          float: left;
          margin-right: 5px;
        }
        .project {
          padding-left: 10px;
        }
        .doctor {
          position: relative;
          padding-right: 10px;
          &.doctor::after {
            position: absolute;
            content: "";
            width: 3px;
            height: 10px;
            background: rgba(216, 216, 216, 1);
            border-radius: 2px;
            top: 30%;
            right: -10%;
          }
          // background: rgba(255, 133, 154, 1);
        }
      }
    }
    .collect {
      width: 28px;
      height: 28px;
      position: absolute;
      top: 32px;
      right: 30px;
    }
    .hos-result {
      width: 52px;
      height: 15px;
      display: block;
      position: absolute;
      bottom: 16px;
      right: 16px;
      .icon {
        width: 100%;
        height: 100%;
      }
    }
  }
  .license {
    width: 100%;
    height: 91px;
    box-sizing: border-box;
    padding: 22px 19px 16px;
    background: #fff;
    margin: 10px 0;
    .list {
      height: 21px;
      .li {
        float: left;
        position: relative;
        color: #333;
        font-size: 14px;
        height: 21px;
        position: relative;
        line-height: 21px;
        margin-left: 17px;
        padding-left: 24px;
        .icon {
          display: inline-block;
          position: absolute;
          left: 0;
          &.icon1 {
            width: 20px;
            height: 16px;
            top: 10%;
          }
          &.icon2 {
            width: 17px;
            height: 21px;
            top: 0;
          }
          &.icon3 {
            width: 21px;
            height: 16px;
            top: 12%;
          }
        }
      }
    }
    .btn {
      // height: 12px;
      width: 100%;
      text-align: center;
      margin-top: 20px;
      .icon {
        width: 20px;
        height: 11px;
      }
    }
  }
  .photo {
    margin: 10px 0;
    padding: 22px 19px 18px;
    background: #fff;
    height: auto;
    .licenseshow {
      width: 100%;
      box-sizing: border-box;
      font-size: 14px;
      color: #333;
      &.licenseshow:nth-of-type(2) {
        margin-top: 31px;
        .title {
          padding-left: 28px;
          .icon {
            width: 18px;
            height: 21px;
            top: 0;
            left: 0;
          }
        }
      }
      &.licenseshow:nth-of-type(3) {
        margin-top: 31px;
        .title {
          padding-left: 31px;
          .icon {
            width: 21px;
            height: 17px;
            top: 10%;
            left: 0;
          }
        }
      }
      .ul {
        .title {
          height: 21px;
          position: relative;
          padding-left: 27px;
          margin-bottom: 7px;
          .icon {
            width: 20px;
            height: 17px;
            position: absolute;
            top: 10%;
            left: 0;
          }
          // &.title:nth-of-type(2) {
          //   .icon {
          //     width: 18px;
          //     height: 21px;
          //     top: 0;
          //     left: 0;
          //   }
          // }
          &.title:nth-of-type(3) {
            .icon {
              width: 21px;
              height: 17px;
              top: 11%;
              left: 0;
            }
          }
        }
        .li {
          // width: 100%;
          display: inline-block;
          margin-right: 15px;
          .img {
            width: 95px;
            height: 95px;
          }
        }
      }
    }
    .pick {
      width: 100%;
      text-align: center;
      margin-top: 20px;
      .packup {
        width: 19px;
        height: 11px;
      }
    }
  }
  .section {
    width: 100%;
    padding: 0 15px;
    background-color: #fff;
    margin-top: 10px;
    box-sizing: border-box;
    .title {
      height: 40px;
      .icon {
        width: 2px;
        height: 10px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 4px;
      }
      .msg {
        font-size: 14px;
        font-family: "Medium";
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 40px;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .scope {
    padding-bottom: 10px;
    .title {
      .icon {
        background-color: rgba(103, 176, 113, 1);
      }
    }
    .scope-detail {
      font-size: 12px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      transition: all 1s;
      line-height: 17px;
      width: 100%;
      .richtext {
        width: 100%;
        .richtext img {
          width: 100%;
        }
      }
    }
  }
  //   医院介绍
  .introduction {
    padding-bottom: 10px;
    swiper {
      height: 130px !important;
    }
    .title {
      .icon {
        background-color: rgba(255, 165, 106, 1);
      }
      .show-all {
        font-size: 12px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 40px;
        padding-left: 20px;
        float: right;
        .arrows {
          width: 7px;
          height: 4px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 4px;
          transition: all 0.5s;
          .img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .uo {
          transform: rotate(180deg);
        }
        .down {
          transform: rotate(180deg);
        }
      }
    }
    .intro-detail {
      font-size: 12px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      transition: all 1s;
      line-height: 17px;
      width: 100%;
      .richtext {
        width: 100%;
        .richtext img {
          width: 100%;
        }
      }
    }
    .normal {
      height: 51px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
    .show {
      height: auto;
      min-height: 51px;
      overflow: visible;
    }
  }
  //   医生介绍
  .doctors {
    padding-bottom: 10px;
    .title {
      .icon {
        background-color: rgba(143, 151, 255, 1);
      }
    }
    .doc-list {
      height: 130px;
      .list-item {
        width: 120px;
        height: 130px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(237, 237, 237, 1);
        box-sizing: border-box;
        margin-right: 10px;
        float: left;
        white-space: nowrap;
        // 医生头像
        .item-top {
          width: 50px;
          height: 50px;
          display: block;
          position: relative;
          margin: 10px auto 0;
          .logo {
            width: 50px;
            height: 50px;
            border-radius: 25px;
            display: block;
            overflow: hidden;
            position: relative;
            .img {
              width: 100%;
            }
          }
          .tip {
            width: 13px;
            height: 13px;
            position: absolute;
            bottom: 0;
            right: 2px;
            .img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        // 医生姓名
        .doc-name {
          font-size: 14px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 20px;
          margin: 5px auto 0;
          text-align: center;
        }
        // 医生职位
        .duty {
          font-size: 12px;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          height: 17px;
          line-height: 17px;
          text-align: center;
        }
        // 医生评分
        .rates {
          margin: 3px auto 0;
          text-align: center;
          .stars {
            display: inline-block;
            vertical-align: baseline;
            .img {
              width: 14px;
              height: 14px;
              vertical-align: middle;
            }
          }
          .score {
            font-size: 10px;
            font-family: "PingFangSC-Regular";
            font-weight: 400;
            color: rgba(255, 152, 0, 1);
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
          }
        }
      }
    }
  }
  .project {
    padding: 0;
    .title {
      padding-left: 15px;
      .icon {
        background-color: rgba(254, 106, 156, 1);
      }
    }
    .controller {
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      display: flex;
      border-top: 1px solid rgba(243, 244, 246, 1);
      border-bottom: 1px solid rgba(243, 244, 246, 1);
      .controller-item {
        flex: 1;
        font-size: 14px;
        font-family: "PingFangSC-Regular";
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 40px;
        text-align: center;
        vertical-align: middle;
        .arraws {
          display: inline-block;
          vertical-align: middle;
          margin-left: 6px;
          position: relative;
          height: 14px;
          width: 10px;
          .top {
            position: absolute;
            left: 50%;
            top: 0px;
            transform: translateX(-50%);
            img {
              width: 7px;
              height: 4px;
              display: block;
            }
          }
          .bottom {
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            img {
              width: 7px;
              height: 4px;
              display: block;
              transform: rotate(180deg);
            }
          }
        }
      }
      .active {
        color: rgba(255, 56, 62, 1);
      }
    }
  }
  //   项目列表
}
.img-yx {
    position: absolute;
    width: 50px;
    height: 16px;
    top: 50px;
}
.score {
    position: absolute;
    top: 12px;
    right: 70px;
    img {
        width: 9px;
		height: 11px;
		vertical-align: middle
    }
    span {
        font-size: 10px;
        color: rgba(255, 132, 48, 1);
        margin-left: 2px;
    }
}
.yx-btn{position: absolute;top: 62px;right: 15px;}
.yx-btn>p{text-align: center;width: 52px;height: 15px;background: rgba(64, 183, 168, 1);color: white;position: relative;font-size: 9px;
line-height: 15px;
border-radius: 8px;
}
.yx-btn>p>img{width: 4px;height: 6px;;position: absolute;top:5px;right: 5px;}
</style>

